<template>
	<view class="my-input">
		<input class="my-input-value" :type="type" :value="value" :placeholder="placeholder" @blur="handleBlur"
			@focus="handleFocus" :adjust-position="true" @input="handleInput" :disabled="disabled" />
	</view>
</template>

<script>
	export default {
		name: 'MyInput',
		props: {
			value: [String, Number],
			placeholder: String,
			type: {
				type: String,
				default: 'text'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleInput(event) {
				// 更新value属性并触发自定义的input事件
				this.$emit('input', event.target.value);
			},
			handleBlur(event) {
				this.$eventBus.emit('myInputBlur', event);
			},
			handleFocus(event) {
				this.$eventBus.emit('myInputFocus', event);
			}
		}
	}
</script>

<style scoped>
	.my-input {
		border: 2rpx solid #dadada;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 4px 10rpx;
		font-size: 28rpx;
		background: #eee;
		/* height: 60rpx; */
	}

	.my-input-value {
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
	} 
</style>